import { Button, Space } from "antd";
import React, { useContext } from "react";
import useDesignActions from "./useActions";
import { copyAndAddItemById, findParent, moveItemDownById, moveItemUpById, removeItemById, updatePrimaryKey } from "../shared";
import { ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
import { LowCodeContext } from "../core/Provider";
import { produce } from "immer";
const DesignerToolbar = ({ disabledActions, item }: any) => {
  const { items } = useContext(LowCodeContext)
  const { copyMaterialToDesigner, updateDesigner } = useDesignActions();
  return <div className="design-toolbar-actions">
    <span onClick={() => {
      const nextState = produce(items, draft => {
        moveItemUpById(draft.children, item._id)
      })
      updateDesigner(nextState)
    }}>
      <ArrowUpOutlined />
    </span>
    <span onClick={() => {

      const nextState = produce(items, draft => {
        moveItemDownById(draft.children, item._id)
      })
      updateDesigner(nextState)
      // moveItemDownById(items['properties']['x-component-props']['items'], item._id)
    }}>
      <ArrowDownOutlined />
    </span>
    <span onClick={() => {
      // const items = copyAndAddItemById(items.children, item._id)
      // updateDesigner(items)
      const nextState = produce(items, draft => {
        
        const findItem = findParent([draft], item._id);
        if (findItem) {
          findItem.children.push(updatePrimaryKey(item))
        }
      })
      updateDesigner(nextState)
    }}>
      <CopyOutlined />
    </span>
    <span onClick={() => {
      // removeItemById(items['properties']['x-component-props']['items'], item._id)
      const nextState = produce(items, draft => {
          removeItemById(draft.children, item._id);
        
      })
      updateDesigner(nextState)
    }}>
      <DeleteOutlined />
    </span>
    {/* <Button icon={<CopyOutlined />} onKeyDown={()=>{
    alert('sss')
  }} size="small">
  </Button>
  <Button icon={<DeleteOutlined />} onClick={()=>{
    removeItemById(items['properties']['x-component-props']['items'],item._id)
  }} size="small">
    
  </Button> */}
  </div>
  return (
    <div className="design-toolbar">
      {disabledActions ? null : (
        <div className="design-toolbar-actions">
          <span onClick={() => {
            moveItemUpById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <ArrowUpOutlined />
          </span>
          <span onClick={() => {
            moveItemDownById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <ArrowDownOutlined />
          </span>
          <span onClick={() => {
            copyAndAddItemById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <CopyOutlined />
          </span>
          <span onClick={() => {
            removeItemById(items['properties']['x-component-props']['items'], item._id)

          }}>
            <DeleteOutlined />
          </span>
          {/* <Button icon={<CopyOutlined />} onKeyDown={()=>{
            alert('sss')
          }} size="small">
          </Button>
          <Button icon={<DeleteOutlined />} onClick={()=>{
            removeItemById(items['properties']['x-component-props']['items'],item._id)
          }} size="small">
            
          </Button> */}
        </div>
      )}
    </div>
  );
};
export default DesignerToolbar;
